
<template>
  <div class="page-all">
    <div class="page-all-body">
      <div ref="pageAllBodyIn" class="page-all-body-in">
        <div ref="banner" class="all-banner">
          <div class="nav">
            <span class="nav-link" @click="linkto('/')">首页</span
            ><span class="nav-arrow">></span
            ><span class="nav-page"> 粉体复配应用</span>
          </div>
          <div class="banner">
            <div class="banner_user_id">
              {{ user_name }}，欢迎来到粉体复配系统
            </div>
          </div>
        </div>
        <div
          class="guide-help"
          @click.stop="showGuide"
          v-if="/2|3/.test(activeName)"
        >
          <svg-icon icon-class="guidehelp" />使用帮助
        </div>
        <el-tabs v-model="activeName" ref="tabs" @tab-click="handleTabClick">
          <el-tab-pane
            label="数据管理"
            name="1"
            :style="{ height: paneHeight }"
          >
            <div class="main-body">
              <div class="main-body-left" ref="mainBodyLeft">
                <div class="main-body-left-in">
                  <div class="head" ref="mainBodyLeftHead">
                    <el-button
                      style="position: relative"
                      type="primary"
                      class="el-btn"
                      size="mini"
                    >
                      <svg-icon icon-class="uploadfiles" />
                      <input
                        ref="file"
                        title=""
                        style="
                          opacity: 0;
                          width: 100%;
                          height: 100%;
                          position: absolute;
                          top: 0;
                          left: 0;
                        "
                        type="file"
                        name="file"
                        multiple
                        class="file-input"
                        @change="requestFileUpload"
                        accept=".txt"
                      />
                      上传文件
                    </el-button>
                    <el-button
                      style="position: relative"
                      type="primary"
                      class="el-btn"
                      size="mini"
                      @click="merge"
                      :disabled="dataManageSel.length !== 2"
                    >
                      <svg-icon icon-class="mergefile" />
                      合并文件
                    </el-button>
                    <el-button
                      style="position: relative"
                      type="primary"
                      class="el-btn"
                      size="mini"
                      @click="renamedialogOpen"
                      :disabled="dataManageSel.length !== 1"
                    >
                      <svg-icon icon-class="renamefile" />
                      重命名
                    </el-button>
                    <el-button
                      style="position: relative"
                      type="primary"
                      class="el-btn"
                      size="mini"
                      :disabled="dataManageSel.length !== 1"
                      @click="dataManageDel"
                      ><svg-icon icon-class="deletefile" />
                      删除文件
                    </el-button>
                  </div>
                  <div
                    class="file-list"
                    :style="{ height: leftFilelistHeight }"
                  >
                    <ul>
                      <li
                        v-for="(item, key) in filelist"
                        :key="key"
                        :class="[showfilename === item ? 'active' : '']"
                      >
                        <div
                          :class="[
                            'file-check-box',
                            dataManageSel.includes(item)
                              ? 'file-check-box-checked'
                              : '',
                          ]"
                          @click="checkfile(item)"
                        >
                          <svg-icon
                            icon-class="check3"
                            v-if="dataManageSel.includes(item)"
                          />
                        </div>
                        <div class="file-body" @click="showfile(item)">
                          {{ item }}
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="data-chart">
                <div
                  id="dataBasicChart"
                  ref="dataBasicChart"
                  class="chart"
                  :style="{ width: chartWidth, height: chartHeight }"
                ></div>
              </div>
              <div class="data-info" ref="mainBodyRight">
                <div class="data-info-in">
                  <div ref="savefileBtn" class="savefile-btn">
                    <el-button
                      class="el-btn2"
                      type="primary"
                      size="mini"
                      @click="save"
                      :disabled="!this.showfilename"
                    >
                      <svg-icon icon-class="savefile" />
                      保存文件
                    </el-button>
                  </div>
                  <div class="filedata" :style="{ height: tableScrollHeight }">
                    <el-table
                      class="table-info"
                      :header-cell-style="{ 'text-align': 'center' }"
                      :cell-style="{ 'text-align': 'center' }"
                      border
                      :data="tableData"
                      @cell-click="tabClick"
                      style="width: 100%"
                    >
                      <el-table-column label="粒径">
                        <template slot-scope="scope">
                          <el-input
                            :ref="'particleSize' + scope.row.index"
                            class="cell-edit"
                            v-if="
                              scope.row.index === tabClickIndex &&
                              tabClickLabel === 'particleSize'
                            "
                            v-model="scope.row.particleSize"
                            size="small"
                            @blur="inputBlur"
                            @keyup.enter.native="inputBlur"
                          ></el-input>
                          <span v-else>{{ scope.row.particleSize }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="分布">
                        <template slot-scope="scope">
                          <el-input
                            :ref="'distribution' + scope.row.index"
                            class="cell-edit"
                            v-if="
                              scope.row.index === tabClickIndex &&
                              tabClickLabel === 'distribution'
                            "
                            v-model="scope.row.distribution"
                            size="small"
                            @blur="inputBlur"
                            @keyup.enter.native="inputBlur"
                          ></el-input>
                          <span v-else>{{ scope.row.distribution }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="累计">
                        <template slot-scope="scope">
                          <el-input
                            :ref="'accumulation' + scope.row.index"
                            class="cell-edit"
                            v-if="
                              scope.row.index === tabClickIndex &&
                              tabClickLabel === 'accumulation'
                            "
                            v-model="scope.row.accumulation"
                            size="small"
                            @blur="inputBlur"
                            @keyup.enter.native="inputBlur"
                          ></el-input>
                          <span v-else>{{ scope.row.accumulation }}</span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="粉体复配计算"
            name="2"
            :style="{ height: paneHeight }"
          >
            <powder-compound
              ref="powderCompound"
              :user_name="user_name"
              :leftFilelistHeight="leftFilelistHeight"
              :user_id="user_id"
              :computeDotHeight="computeDotHeight"
              :computeModelHeight="computeModelHeight"
              :chartHeight="powderCompoundchartHeight"
              :chartWidth="powdeCompoundChartWidth"
              :powderCompoundFileImportList.sync="powderCompoundFileImportList"
              @showFilesListDialog="showFilesListDialog"
            />
          </el-tab-pane>
          <el-tab-pane
            label="最密堆积计算"
            name="3"
            :style="{ height: paneHeight }"
          >
            <closest-packing
              ref="closestPacking"
              :user_name="user_name"
              :user_id="user_id"
              :leftFilelistHeight="leftFilelistHeight"
              :chartHeight="closestPackingChartHeight"
              :chartWidth="closestPackingChartWidth"
              :closestPackingFileImportList.sync="closestPackingFileImportList"
              @showFilesListDialog="showFilesListDialog"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <el-dialog
      :visible.sync="filesListDialog"
      :close-on-click-modal="false"
      :before-close="cancel"
      :title="filesListDialogTitle"
      append-to-body
      width="500px"
      @close="cancel"
    >
      <ul class="file-list" v-if="filelist.length">
        <li>
          <div
            :class="[
              'file-check-box',
              isFilesListSelectAll ? 'file-check-box-checked' : '',
            ]"
            @click="filesListSelectAll()"
          >
            <svg-icon icon-class="check3" v-if="isFilesListSelectAll" />
          </div>
          <div class="file-list-select-txt">全选</div>
        </li>
        <li v-for="(file, key) in filelist" :key="key">
          <div
            :class="[
              'file-check-box',
              selectFile.includes(file) ? 'file-check-box-checked' : '',
            ]"
            @click="choosefile(file)"
          >
            <svg-icon icon-class="check3" v-if="selectFile.includes(file)" />
          </div>
          <div class="file">
            {{ file }}
          </div>
        </li>
      </ul>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="cancel" class="cancel-btn"
          >取消</el-button
        >
        <el-button type="primary" @click="doSubmit" class="checkok-btn"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="renameDialog"
      :close-on-click-modal="false"
      :before-close="renameDialogCancel"
      title="重命名"
      append-to-body
      width="500px"
      @close="renameDialogCancel"
    >
      <el-form ref="renameform" :model="renameform" :rules="renamerules">
        <el-form-item label="旧文件名" prop="old_name">
          {{ renameform.old_name }}
        </el-form-item>
        <el-form-item label="新文件名" prop="new_name">
          <el-input
            v-model="renameform.new_name"
            @blur="checkRenamefile"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="renameDialogCancel" class="cancel-btn"
          >取消</el-button
        >
        <el-button type="primary" @click="renameDoSubmit" class="checkok-btn"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="guideDialog"
      :close-on-click-modal="false"
      title="重命名"
      append-to-body
      class="el-dialog-guide"
    >
      <div v-if="activeName === '2'">
        <div class="image_guide powderCompound_guide1" v-show="step === 1">
          <div class="step-btns">
            <div class="step-btn cancel-step" @click="cancelStep()">跳过</div>
            <div class="step-btn next-step" @click="nextStep(2)">下一步</div>
          </div>
        </div>
        <div class="image_guide powderCompound_guide2" v-show="step === 2">
          <div class="step-btns">
            <div class="step-btn cancel-step" @click="cancelStep()">跳过</div>
            <div class="step-btn pre-step" @click="nextStep(1)">上一步</div>
            <div class="step-btn next-step" @click="nextStep(3)">下一步</div>
          </div>
        </div>
        <div class="image_guide powderCompound_guide3" v-show="step === 3">
          <div class="step-btns">
            <div class="step-btn cancel-step" @click="cancelStep()">跳过</div>
            <div class="step-btn pre-step" @click="nextStep(2)">上一步</div>
            <div
              class="step-btn next-step"
              @click="finishStep('powderCompound')"
            >
              完成
            </div>
          </div>
        </div>
      </div>
      <div v-else-if="activeName === '3'">
        <div class="image_guide closestPacking_guide1" v-show="step === 1">
          <div class="step-btns">
            <div class="step-btn cancel-step" @click="cancelStep()">跳过</div>
            <div class="step-btn next-step" @click="nextStep(2)">下一步</div>
          </div>
        </div>
        <div class="image_guide closestPacking_guide2" v-show="step === 2">
          <div class="step-btns">
            <div class="step-btn cancel-step" @click="cancelStep()">跳过</div>
            <div class="step-btn pre-step" @click="nextStep(1)">上一步</div>
            <div class="step-btn next-step" @click="nextStep(3)">下一步</div>
          </div>
        </div>
        <div class="image_guide closestPacking_guide3" v-show="step === 3">
          <div class="step-btns">
            <div class="step-btn cancel-step" @click="cancelStep()">跳过</div>
            <div class="step-btn pre-step" @click="nextStep(2)">上一步</div>
            <div
              class="step-btn next-step"
              @click="finishStep('powderCompound')"
            >
              完成
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <div class="copyright">copyright@EpiScience 沪ICP备2025111528号</div>
  </div>
</template>
 
<script>
import {
  get_files,
  upload,
  get_detile,
  curve_intersections,
  horizontal_intersections,
  points,
  merge,
  rename,
  dataManageDel,
  get_config_parameters,
  densest_accumulation_all,
  app_access_token,
  access_token,
  getcode,
  powderGuideAdd,
  powderGuideQuery,
  feishuUserQuery,
} from "@/api/index";
import powderCompound from "@/components/powderCompound.vue";
import closestPacking from "@/components/closestPacking.vue";
import { deepClone } from "@/utils";
import ResizeMixin from "@/utils/ResizeHandler";
import Cookies from "js-cookie";
export default {
  name: "index",
  data() {
    return {
      step: 1,
      guideDialog: false,
      propertiesData: [],
      propertiesDialog: false,
      leftFilelistHeight: "",
      bannerHeight: "",
      dataBasicChartWidth: "",
      isFilesListSelectAll: false,
      showfilename: "",
      closestPackingChartWidth: "",
      powdeCompoundChartWidth: "",
      chartWidth: "",
      chartHeight: "",
      powderCompoundchartHeight: "",
      closestPackingChartHeight: "",
      paneHeight: "",
      tableScrollHeight: "",
      computeModelHeight: "",
      computeDotHeight: "",
      user_id: "",
      user_name: "",
      renameform: {
        old_name: "",
        new_name: "",
      },
      renameDialog: false,
      filesListDialogTitle: "选择分析文件",
      filesListDialog: false,
      filename: "",
      dataManageSel: [],
      selectFile: [],

      tableData: [],
      activeName: "1",
      filelist: [],
      tabClickIndex: null, // 点击的单元格
      tabClickLabel: "",
      addLine: false,
      intersectiondot: [],
      deltas: [],
      renamerules: {
        new_name: [
          { required: true, message: "请输入文件名称", trigger: "blur" },
        ],
      },
      propertiesRules: {
        density: [],
      },
      filesListDialogType: "",
      fileImportList: [],
      powderCompoundFileImportList: [],
      closestPackingFileImportList: [],
      distribution: [],
      accumulation: [],
    };
  },
  mixins: [ResizeMixin],
  components: {
    powderCompound,
    closestPacking,
  },
  watch: {
    activeName: function (val) {
      this.computedHeight();
      if (val === "2") {
        this.isShowDialog(val);
      } else if (val === "3") {
        this.isShowDialog(val);
      }
    },
  },
  computed: {},
  async mounted() {
    let mobile = localStorage.getItem("feishu_mobile");
    if (mobile) {
      this.user_id = mobile.replace(/\+86/, "");
      let feishu_username = localStorage.getItem("feishu_username");
      if (feishu_username) {
        this.user_name = feishu_username;
      } else {
        let res = await feishuUserQuery({ mobile });
        if (res.data) {
          this.user_name = res.data["name"];
          if (res.data["name"]) {
            localStorage.setItem("feishu_username", res.data["name"]);
          } else {
            localStorage.removeItem("feishu_username");
          }
        }
      }

      this.get_files();
      this.computedHeight();
      window.addEventListener("resize", this.computedHeight);
    } else {
      this.$router.push("/");
    }
  },

  beforeDestroy() {
    window.removeEventListener("resize", this.computedHeight);
  },
  methods: {
    linkto(url) {
      this.$router.push({ path: url });
    },
    showGuide() {
      this.guideDialog = true;
      this.step = 1;
    },
    cancelStep() {
      this.guideDialog = false;
      this.step = 1;
    },
    finishStep(type) {
      this.guideDialog = false;
      this.step = 1;
    },
    nextStep(step) {
      this.step = step;
    },
    async isShowDialog(val) {
      let guide_name;
      if (val === "2") {
        guide_name = "powderCompound";
      } else if (val === "3") {
        guide_name = "closestPacking";
      }
      if (guide_name) {
        let powderGuideQueryRes = await powderGuideQuery({
          mobile: this.user_id,
          guide_name,
        });
        if (!powderGuideQueryRes["data"]) {
          this.step = 1;
          this.guideDialog = true;
          await powderGuideAdd({
            mobile: this.user_id,
            guide_name,
          });
        }
      }
    },

    handleTabClick() {
      if (this.activeName === "1") {
        this.get_files();
      }

      this.computedHeight();
      console.log(this.activeName, "###handleTabClick");
    },
    filesListSelectAll() {
      if (this.isFilesListSelectAll) {
        this.isFilesListSelectAll = false;
        this.selectFile = [];
      } else {
        this.isFilesListSelectAll = true;
        this.selectFile = deepClone(this.filelist);
      }
    },
    showFilesListDialog(type, selectFile) {
      this.filesListDialog = true;
      this.filesListDialogType = type;
      this.selectFile = selectFile;
    },
    computedHeight() {
      this.$nextTick((e) => {
        console.log(this.$refs, "###");
        this.bannerHeight = (200 * this.$refs.banner.offsetWidth) / 2672 + "px";
        let mainheight =
          this.$refs.pageAllBodyIn.offsetHeight -
          this.$refs.banner.offsetHeight -
          this.$refs.tabs.$el.children[0]["offsetHeight"] -
          15;
        let mainWidth = this.$refs.tabs.$el.children[1]["offsetWidth"];
        let savefileBtnHeight = this.$refs.savefileBtn.offsetHeight;
        let mainBodyLeftHeadHeight;

        if (this.activeName === "1") {
          mainBodyLeftHeadHeight = this.$refs.mainBodyLeftHead.offsetHeight;
          this.chartHeight = mainheight + "px";
          this.chartWidth =
            mainWidth -
            this.$refs.mainBodyLeft.offsetWidth -
            this.$refs.mainBodyRight.offsetWidth +
            "px";
        } else if (this.activeName === "2") {
          mainBodyLeftHeadHeight =
            this.$refs.powderCompound.$refs.mainBodyLeftHead2.offsetHeight;

          this.powdeCompoundChartWidth =
            mainWidth -
            this.$refs.powderCompound.$refs.functionalCalculationLeft
              .offsetWidth -
            this.$refs.powderCompound.$refs.functionalCalculationRight
              .offsetWidth +
            "px";
          this.powderCompoundchartHeight =
            mainheight -
            this.$refs.powderCompound.$refs.functionalCalculationCenterHead
              .offsetHeight +
            "px";

          this.computeModelHeight =
            mainheight -
            this.$refs.powderCompound.$refs.functionalCalculationRightTop
              .offsetHeight +
            "px";
          console.log(
            mainheight,
            this.$refs.powderCompound.$refs.functionalCalculationRightTop
              .offsetHeight,
            this.computeModelHeight
          );
        } else {
          mainBodyLeftHeadHeight =
            this.$refs.closestPacking.$refs.mainBodyLeftHead3.offsetHeight;

          this.closestPackingChartWidth =
            mainWidth -
            this.$refs.closestPacking.$refs.functionalCalculationLeft
              .offsetWidth -
            this.$refs.closestPacking.$refs.chartMenu.offsetWidth +
            "px";
          this.closestPackingChartHeight =
            mainheight -
            this.$refs.closestPacking.$refs.functionalCalculationCenterHead
              .offsetHeight +
            "px";
        }

        //  mainheight = document.body.clientHeight - 280;
        // this.paneHeight = mainheight + "px";
        this.tableScrollHeight = mainheight - savefileBtnHeight + "px";

        this.computeDotHeight = mainheight - 620 + "px";

        this.dataBasicChartWidth = mainheight - 300 - 300 - 60 + "px";
        this.leftFilelistHeight = mainheight - mainBodyLeftHeadHeight + "px";
        console.log(
          this.leftFilelistHeight,
          "######## this.leftFilelistHeight"
        );
        if (this.dataBasicChart) {
          this.$nextTick(() => {
            this.dataBasicChart.resize();
          });
        }
      });
    },
    async apiAuth(fn) {
      let _this = this;
      if (!window.h5sdk) {
        console.log(process.env.NODE_ENV);
        // alert("please open in feishu");
        if (process.env.NODE_ENV === "development") {
        }
        _this.user_id = "anita";
        fn();
        return;
      }
      let res = await get_config_parameters();
      console.log(res, "###response");
      console.log(
        "接入方服务端返回给接入方前端的结果(前端调用config接口的所需参数):",
        res
      );
      // 通过error接口处理API验证失败后的回调
      window.h5sdk.error((err) => {
        throw ("h5sdk error:", JSON.stringify(err));
      });
      // 调用config接口进行鉴权
      window.h5sdk.config({
        appId: res.appid,
        timestamp: res.timestamp,
        nonceStr: res.noncestr,
        signature: res.signature,
        jsApiList: [],
        //鉴权成功回调
        onSuccess: (res) => {
          console.log(`config success: ${JSON.stringify(res)}`);
        },
        //鉴权失败回调
        onFail: (err) => {
          throw `config failed: ${JSON.stringify(err)}`;
        },
      });
      // 完成鉴权后，便可在 window.h5sdk.ready 里调用 JSAPI
      window.h5sdk.ready(() => {
        // window.h5sdk.ready回调函数在环境准备就绪时触发
        // 调用 getUserInfo API 获取已登录用户的基本信息，详细文档参见https://open.feishu.cn/document/uYjL24iN/ucjMx4yNyEjL3ITM
        tt.getUserInfo({
          // getUserInfo API 调用成功回调
          success(res) {
            _this["user_id"] = res["userInfo"]["nickName"];
            fn();
            // console.log(res["userInfo"]["nickName"])
            // console.log(`getUserInfo success: ${JSON.stringify(res)}`);
            // 单独定义的函数showUser，用于将用户信息展示在前端页面上
          },
          // getUserInfo API 调用失败回调
          fail(err) {
            console.log(`getUserInfo failed:`, JSON.stringify(err));
          },
        });
        // 调用 showToast API 弹出全局提示框，详细文档参见https://open.feishu.cn/document/uAjLw4CM/uYjL24iN/block/api/showtoast
      });
    },
    async dataManageDel() {
      let filename = this.dataManageSel[0];
      await dataManageDel(filename, {
        user_id: this.user_id,
        user_name: this.user_name,
      });
      this.$message({
        type: "success",
        message: "删除成功",
      });

      let index = this.filelist.indexOf(filename);

      if (this.filelist > -1) {
        this.filelist.splice(index, 1);
      }

      this.dataManageSel = [];
      this.tableData = [];
      this.get_files();
    },
    renamedialogOpen() {
      if (this.dataManageSel.length !== 1) {
        return;
      }
      this.renameform.old_name = this.dataManageSel[0];
      this.renameDialog = true;
    },
    renameDialogCancel() {
      this.renameDialog = false;
      Object.keys(this.renameform).forEach((item) => {
        this.renameform[item] = "";
      });
    },
    renameDoSubmit() {
      if (this.dataManageSel.length !== 1) {
        return;
      }
      this.$refs.renameform.validate(async (valid) => {
        if (valid) {
          await rename({
            user_id: this.user_id,
            user_name: this.user_name,
            old_name: this.renameform.old_name,
            new_name: this.renameform.new_name,
          });
          let index = this.dataManageSel.indexOf(this.renameform.old_name);
          this.dataManageSel.splice(index, 1);
          this.renameDialogCancel();
          this.get_files();
        }
      });
    },
    checkRenamefile() {
      let ext = this.renameform.new_name.slice(-3);
      if (ext !== "txt") {
        this.renameform.new_name = this.renameform.new_name + ".txt";
      }
    },
    async merge() {
      if (this.dataManageSel.length !== 2) {
        return;
      }
      let res = await merge({
        filenames: this.dataManageSel,
        user_id: this.user_id,
        user_name: this.user_name,
      });
      this.$message({
        type: "success",
        message: "已生成新文件" + res["new_filename"],
      });
      this.get_files();
    },

    cancel() {
      this.filesListDialog = false;
      this.selectFile = [];
      this.isFilesListSelectAll = false;
    },
    doSubmit() {
      let fileImportList = deepClone(this.selectFile);

      if (this.filesListDialogType === "powderCompound") {
        this.powderCompoundFileImportList = fileImportList;
      } else if (this.filesListDialogType === "closestPacking") {
        this.closestPackingFileImportList = fileImportList;
      }

      this.cancel();
    },
    choosefile(file) {
      let index = this.selectFile.indexOf(file);
      if (index > -1) {
        this.selectFile.splice(index, 1);
      } else {
        this.selectFile.push(file);
      }
    },
    mostDenseImportFile() {
      this.filesListDialog = true;
    },
    async checkfile(filename) {
      let index = this.dataManageSel.indexOf(filename);
      if (index > -1) {
        this.dataManageSel.splice(index, 1);
      } else {
        this.dataManageSel.push(filename);
      }
      if (this.dataManageSel.length !== 1) {
        this.tableData = [];
        return;
      }
    },

    async showfile(filename) {
      this.showfilename = filename;

      let res = await get_detile({
        user_id: this.user_id,
        user_name: this.user_name,
        filename,
      });
      let file_content = res.file_content;
      this.tableData = [];
      this.distribution = [];
      this.accumulation = [];
      for (let i = 0; i < file_content.length; i++) {
        let item = file_content[i];
        this.tableData = [
          ...this.tableData,
          {
            particleSize: item[0],
            distribution: item[1],
            accumulation: item[2],
            index: i,
          },
        ];
        this.distribution = [...this.distribution, [item[0], item[1]]];
        this.accumulation = [...this.accumulation, [item[0], item[2]]];
      }
      this.getBasiChart();
    },
    getBasiChart() {
      if (!this.dataBasicChart) {
        var chartDom = this.$refs.dataBasicChart;
        this.dataBasicChart = this.$echarts.init(chartDom);
      }
      let series = [];
      let nameList = ["分布", "累计"];
      series.push({
        name: "分布",
        type: "line",
        yAxisIndex: 0,
        symbol: "none",
        data: this.distribution,
      });
      series.push({
        name: "累计",
        type: "line",
        yAxisIndex: 1,
        symbol: "none",
        data: this.accumulation,
      });
      this.dataBasicChart.setOption(
        {
          tooltip: {
            trigger: "",
          },
          legend: {
            x: "center",
            y: "bottom",
            data: nameList,
          },
          dataZoom: [
            {
              type: "inside",
              xAxisIndex: 0,
              zoomOnMouseWheel: true, //滚轮是否触发缩放
              moveOnMouseMove: true, //鼠标滚轮触发滚动
              moveOnMouseWheel: true,
            },
            {
              bottom: 70,
              type: "slider",
            },
          ],
          grid: {
            left: "10",
            right: "10",
            bottom: "100",
            containLabel: true,
          },
          xAxis: {
            logBase: 10,
            type: "log",
            min: 0.01,
          },
          yAxis: [
            {
              type: "value",
              name: "分布",
              interval: 1,
              min: 0,

              max: 10,
            },
            {
              type: "value",
              name: "累计",
              interval: 10,
              min: 0,
              max: 100,
            },
          ],

          series,
        },
        true
      );
    },
    async save() {
      const csvContent = this.tableData
        .map(
          (row) => `${row.particleSize} ${row.distribution} ${row.accumulation}`
        )
        .join("\n");
      const blob = new Blob([csvContent], { type: "text/csv" });
      var formData = new FormData();
      let filename = this.showfilename;

      formData.append("files", blob, filename);
      await upload(this.user_id, this.user_name, formData);
      this.get_files();
    },
    tabClick(row, column, cell, event) {
      switch (column.label) {
        case "粒径":
          this.tabClickIndex = row.index;
          this.tabClickLabel = "particleSize";
          break;
        case "分布":
          this.tabClickIndex = row.index;
          this.tabClickLabel = "distribution";
          break;
        case "累计":
          this.tabClickIndex = row.index;
          this.tabClickLabel = "accumulation";
          break;
        default:
          return;
      }

      const key = this.tabClickLabel + row.index;

      this.$nextTick(() => {
        this.$refs[key].focus();
      });
    },

    inputBlur(row, event, column) {
      this.tabClickIndex = null;
      this.tabClickLabel = "";
    },

    handleInputEnter(row) {
      row.edit = false;
      this.$set(this.tableData, this.tableData.indexOf(row), row);
    },

    async requestFileUpload(e) {
      var formData = new FormData();
      for (var i = 0; i < this.$refs.file.files.length; i++) {
        formData.append("files", this.$refs.file.files[i]);
      }
  
      await upload({ user_id: this.user_id, user_name: this.user_name }, formData);
      this.$refs.file.value = "";
      this.get_files();
    },
    async get_files() {
 
      let res = await get_files({
        user_id: this.user_id,
        user_name: this.user_name,
      });
      this.filelist = res.files;
    },
  },
};
</script>
 <style src="@/assets/powder.scss" scoped lang="scss"></style>